<template>
    <div class="shop-field-goods-list-box">
        <div class="shop-field-goods-list" ref="listContent"  >
            <template v-if="!loading">
                <goods-list-item v-for="(item,index) in list" :key="item" :goods="showList[item]" draggable="true" :data-drag="item" @del="handleDel(index)" ></goods-list-item>
            </template>
        </div>
        <bi-button type="primary" @click="handleAdd" >添加商品</bi-button>
        <bi-icon :loading="loading"></bi-icon>
    </div>
</template>


<script>
import fieldMixin from  '@@/admin/assets/bi-plug/fieldMixin.js';
import goodsDialog from '../goods/select-goods-dialog.vue';
import goodsListItem from './goods-list-item.vue';
import dragsort from '@@/admin/assets/bi-plug/dragsort.js';
export default{
    mixins:[fieldMixin],
    components:{
        goodsListItem
    },
    data(){
        
        let list = [];
        if (this.modelValue){
            list = this.modelValue.split(this.valueSplit);
        }

         
        return {
            hotdata:this.$user.hotdata('shop-field-goods','goods_id'),
            list,
            showList:{},
            loading:true
        }
    },
    props:{
        valueSplit:{
            type:String,
            default:','
        }
    },
    watch:{
        modelValue:{
            handler(val){
               if (val!=''){
                    this.list = val.split(this.valueSplit);
                    this.loadInfo();
               }
              
            }
        },
        list:{
            handler(val){
                this.$emit('update:modelValue',val.join(this.valueSplit));
            },
            deep:true
        }
    },
    methods:{
        update(){
            console.log(JSON.stringify(this.list));
            this.$emit('update:modelValue',this.list.join(this.valueSplit));
        },
        loadInfo(){
            this.loading = false;
            let findList = [];
            this.list.map (id =>{
                let _item = this.hotdata.get(id);
                if (_item){
                    this.showList[id] = _item;
                }else{
                    findList.push(id);
                    this.loading = true;
                }
            });
             

            if (this.loading){
                this.$ajax({
                    url:this.$url({'app':'shop',controller:'admin.field',action:'goodsList'}),
                    data:{
                        ids:findList.join(',')
                    },
                    success:(res)=>{
                        this.loading = false;
                        res.map(item =>{
                            this.showList[item.goods_id] = item;
                            this.hotdata.set(item);
                        }); 
                    }
                });
            }
        },
        handleAdd(){
            let dialog =  this.$dialog({
                type:'vue',
                content:admin.createApp(goodsDialog),
                callback:(value)=>{
                    this.list.push(value.goods_id);
                    this.showList[value.goods_id] = value;
                    this.hotdata.set(value);
                    dialog.close();
                }
            })
        },
        handleDel(index){
            this.list.splice(index,1);
            this.$emit('update:modelValue',this.list.join(this.valueSplit));
        }
    },
    mounted(){
        this.loadInfo();
        let drager  = new dragsort(this.$refs.listContent,{
            callback:(value)=>{
                this.list = value;
            }
        });
    }
    
}
</script>

<style>
.shop-field-goods-list{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}

.shop-field-goods-list .goods-item-box{
    padding: 3px;
    position: relative;
    border-radius: var(--bs-border-radius);
    background-color: var(--bs-tertiary-bg);
    border: var(--bs-border-width) solid var(--bs-border-color);
    flex-shrink: 0;
    width: 150px;
    height:150px;
   
}


.shop-field-goods-list .goods-item-box .goods-image{
     height: 100%;
     width: 100%;
     display: flex;
    align-items: center;
    justify-content: center;
}

.shop-field-goods-list .goods-item-box .goods-image img{
     max-height: 100%;
     max-width: 100%;      
}
.shop-field-goods-list .goods-item-box  .goods-title{
    position: absolute;
    font-size: 12px;
    left: 0px;
    bottom: 0px;
    padding: 5px;
}

.shop-field-goods-list .goods-item-box  .ctrl-box{
    position: absolute;
    right: 0px;
    top: 0px;
    z-index: 10;
    padding: 10px;
    display: flex;
    flex-direction: row;
}
.shop-field-goods-list .goods-item-box  .ctrl-box .btn{
    --bs-btn-padding-x:0;
    --bs-btn-padding-y:0;
    width: 30px;
    height: 30px;
    justify-content: center;
    align-items: center;
    display: flex;
    border-color: rgba(255, 255, 255,0.7);
    background-color: #FFF;
 }
</style>